import { observer } from 'mobx-react';
import { WeaTableNew } from 'comsMobx';
import { WeaProgress, WeaDateGroup, WeaBrowser, WeaLocaleProvider, WeaSelect } from 'ecCom';
import { Row, Col } from 'antd'
import { toJS } from "mobx";
const getLabel = WeaLocaleProvider.getLabel;
const WeaTable = WeaTableNew.WeaTable;

//催办组件
@observer
export default class GovernReport extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount = () => {
        const { governReportStore, id, type, reportType } = this.props;
        //governReportStore.getCondition({ id, type });
        governReportStore.getDataList({ id, type, reportType });
    }

    componentWillReceiveProps(nextProps) {
        //刷新重新渲染 #557406 概述：E9，督办，反馈tab页拆分后，主办单位反馈与协办单位反馈来回切换，数据没自动改变
        if (nextProps.id != this.props.id || nextProps.id != this.props.id || nextProps.reportType != this.props.reportType) {
            const { governReportStore: { isdoSearch } } = this.props;
            if (isdoSearch === true) {  //lusx #554258  概述：E9，督办，详情，领导批示、催办信息等类似tab页，查询条件不生效
                if (nextProps.reportType != this.props.reportType) {//lusx #554258  概述：主办/协办反馈切换查询条件不生效
                    nextProps.governReportStore.getDataList({ id: nextProps.id, type: nextProps.type, reportType: nextProps.reportType });
                } else {
                    return false;
                }
            } else {
                nextProps.governReportStore.getDataList({ id: nextProps.id, type: nextProps.type, reportType: nextProps.reportType });
            }
            //this.props.governReportStore.getDataList({ id: nextProps.id, type: nextProps.type, reportType: nextProps.reportType });
        }
        //lusx 详情页面，弹框保存后页面不刷新 19.1.30>19.4.17
        if (nextProps.location.key != this.props.location.key) {
            const { governReportStore: { isdoSearch } } = this.props;
            if (isdoSearch === true) {  //lusx #554258  概述：E9，督办，详情，领导批示、催办信息等类似tab页，查询条件不生效
                return false;
            } else {
                nextProps.governReportStore.getDataList({ id: nextProps.id, type: nextProps.type, reportType: nextProps.reportType });
            }
        }
    }
    componentWillUnmount = () => {
        const { governReportStore: { clearData } } = this.props;
        this.props.governReportStore.replaceDatas = [];
        clearData();
    }
    render() {
        const { governReportStore, labelTime, labelPers, labelTask,type } = this.props;
        const { formMyAttent, tableStoreMyAttent, status, taskOptions, selectvalue,replaceDatas } = governReportStore;
        return (
            <div className='govern-report'>
                <div className="g-clearfix">
                    <div className="g-search-condition">
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@fcmdti`} type='flex' gutter={16}>
                            {this.getSelectItem(toJS(taskOptions),type,labelTask,selectvalue)}
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8x0tmw`}>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@hudb4p`} type='flex' gutter={24}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7ppej7`}>
                                        <div className="search-title">{labelPers}:</div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@0ctas7`}>
                                        <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@mgq05w`}
                                            type={17}
                                            textDecoration={true}
                                            inputStyle={{ width: 200 }}
                                            onChange={(ids, names, datas) => this.browserHandle(ids,datas)}
                                            isSingle={false}
                                            title={getLabel(106, "对象")}
                                            replaceDatas={toJS(replaceDatas)}
                                        />
                                    </Col>
                                </Row>
                            </Col>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@h8oyno`}>
                                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@81p3zg`} type='flex' gutter={24}>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3ekq3u`}>
                                        <div className="search-title">{labelTime}:</div>
                                    </Col>
                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@z7ym1i`}>
                                        <WeaDateGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaDateGroup@6a2lrq`}
                                            isMobx
                                            value={status.value}
                                            datas={status.datas}
                                            onChange={(selectValue, stateDate, endDate) => this.dateGroupHandle(selectValue, stateDate, endDate)}
                                        />
                                    </Col>
                                </Row>
                            </Col>
                           
                        </Row>
                    </div>
                </div>
                <div>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@rdjey9`}
                        dragColumns = '0'
                        comsWeaTableStore={tableStoreMyAttent}
                        hasOrder={true}
                        needScroll={true}
                        getColumns={c => this.reRenderColumns(c)}
                    />
                </div>
            </div>
        )
    }

    reRenderColumns(columns) {
        columns.forEach(c => {
            if (c.dataIndex == 'progress') {
                c.render = function (text, record) {
                    return <span className='wea-prj-progressStyle' >
                        <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@4xmvyq@${c.dataIndex}`} percent={record.progress || 0} strokeColor={record.progressspan} />
                    </span>
                }
            } else {
                c.render = function (text, record) {
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{ __html: valueSpan }}></span>
                }
            }
        })
        return columns;
    }
    dateGroupHandle(selectValue, stateDate, endDate) {
        if (selectValue[0] === "6") {
            this.props.governReportStore.setItem_three(true)
        } else {
            this.props.governReportStore.setItem_three(false)
        }
        this.props.governReportStore.dateGroupHandle(selectValue);
    }
    browserHandle(ids,datas) {
        this.props.governReportStore.browserHandle(ids,datas);
    }

    selecetHandle = (value) => {
        this.props.governReportStore.setSelectValue(value);
    }

    getSelectItem = (taskOptions,type,labelTask,selectvalue) => {  
        if(type == 0&&taskOptions.length>0){
            return (
                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@7dun7v`}>
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@cdpd0z`} type='flex' gutter={24}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@jhpia9`}>
                            <div className="search-title">{labelTask}:</div>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@rj2reu`}>
                            <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@njztuo`}
                                style={{ width: 150 }}
                                showSearch={true} 
                                optionFilterProp="children"
                                widthMatchOptions={true}
                                options={taskOptions}
                                onChange={(v) => { this.selecetHandle(v) }}
                                value={selectvalue}
                            />
                        </Col>
                    </Row>
                </Col>
            )
        }  
    }
}
